<template>
  <div class="tag-list">
    <div v-for="(tag,index) in tags" class="tag-item" @click="itemClick(index)">
      <span :style="getStyle(index)">{{tag}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TagsList",
    data:function(){

      return {
        selectIndex: 0
      }
    },
    methods:{

      itemClick(index){

        if (this.selectIndex == index){

          return;
        }
        this.selectIndex = index;
        this.$emit('itemClick',index);
      },
      getStyle(index){

        const flag = (index == this.selectIndex);

        return {
          color:flag?this.selectColor: this.normalColor,
          borderBottomColor:flag?this.selectColor:this.normalColor,
          borderBottomWidth:flag?'2px':'0px',
          borderBottomStyle:flag?'solid':'none'
         }
      },

    },
    props:{
      tags:{
        type:Array,
        default(){

          return []
        }
      },
      selectColor:{
        type: String,
        default(){

          return '#f00'
        }
      },
      normalColor:{
        type: String,
        default(){

          return '#000'
        }
      }
    }
  }
</script>

<style scoped>

  .tag-list{

    display: flex;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
  }

  .tag-item{

    flex-grow: 1;

  }

  .tag-item span{

    padding: 5px 8px;
    font-size: 14px;
  }


</style>
